<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>
<body>
	<ul id="flowerList">
		<li><b>桂花</b></li>
		<li>樱花</li>
		<li>菊花</li>
	</ul>
	
	<script>
		// 1. 获取所有列表项并保存至变量中
		var items = document.querySelectorAll('#flowerList li');
		
		// 2. 修改第三个列表项中的“菊花”为“兰花”
		items[2].textContent = '兰花';

		// 3. 修改第二个列表项的文字颜色为红色
		items[1].style.color = 'red';

		// 4. 克隆第一个列表项并插入到原来第三个列表项之后
		var clonedItem = items[0].cloneNode(true);
		items[2].parentNode.insertBefore(clonedItem, items[2].nextSibling);

		function myFunction()
        {
            const ul = document.querySelector("#flowerList")
			//第一种方法:
            // if(ul.parentNode){
            //     ul.parentNode.removeChild(ul)
            // }
			//第二种方法:
            ul.innerHTML = ""

        }
	</script>
	<button onclick="myFunction()">删除</button>
</body>
</html>
